<template>
    <div>
        <Card>
            <p slot="title">模板设置</p>

            <div class="cardBox">
                <Card style="width:35vw">
                    <p slot="title">巡店区域模板</p>
                    <Button v-if="role < 3 " slot="extra" size="default" icon="md-add" type="primary" @click="add('area')">新增区域模板</Button>

                    <Table ref="table" :loading="loading2" stripe :columns="columns2" :data="data2"></Table>
                    <Page :total="total2" :current="currentPage2" show-sizer show-total :page-size="pageSize2" @on-page-size-change="getListByPageSize($event,'area')" @on-change="getListByPageNum($event,'area')"> </Page>
                </Card>

                <Card style="width:35vw">
                    <p slot="title">巡店模块模板</p>
                    <Button v-if="role < 3 " slot="extra" size="default" icon="md-add" type="primary" @click="add('module')">新增模块模板</Button>

                    <Table ref="table" :loading="loading1" stripe :columns="columns1" :data="data1"></Table>
                    <Page :total="total1" :current="currentPage1" show-sizer show-total :page-size="pageSize1" @on-page-size-change="getListByPageSize($event,'module')" @on-change="getListByPageNum($event,'module')"> </Page>
                </Card>
            </div>
        </Card>

        <!-- module  -->
        <Modal v-model="modal1" :title=" moduleFormItem.mdid? '修改模块模板':'新增模块模板'" :mask-closable="false">
            <Form :label-width="140" :model="moduleFormItem">
                <FormItem label="模块名称：">
                    <Input v-model="moduleFormItem.name" style="width:15vw"></Input>
                </FormItem>
            </Form>

            <footer class="modalFooter" slot="footer">
                <Button type="default" @click="modal1=false">取消</Button>
                <Button type="primary" @click="saveModule">保存</Button>
            </footer>
        </Modal>

        <!-- area -->
        <Modal v-model="modal2" :title=" areaFormItem.rdid? '修改区域模板':'新增区域模板'" :mask-closable="false">
            <Form :label-width="140" :model="areaFormItem">

                <FormItem label="区域名称：">
                    <Input v-model="areaFormItem.name" style="width:15vw"></Input>
                </FormItem>

                <FormItem label="顺序：">
                    <Input v-model="areaFormItem.sort" style="width:15vw"></Input>
                </FormItem>

                <FormItem label="巡店工位/办公室：">
                    <RadioGroup v-model="areaFormItem.is_cp_ws">
                        <Radio :label="0">否</Radio>
                        <Radio :label="1">是</Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
            <footer class="modalFooter" slot="footer">
                <Button type="default" @click="modal2=false">取消</Button>
                <Button type="primary" @click="saveArea">保存</Button>
            </footer>
        </Modal>

    </div>
</template>
<script>
    import axios from '@/libs/api.request'
    import {
        mapGetters
    } from 'vuex'
    export default {
        data() {
            return {

                // 模块模态框
                modal1: false,

                // 区域模态框
                modal2: false,

                // 新增/修改 模块对象
                moduleFormItem: {},

                // 新增/修改 区域对象
                areaFormItem: {},

                loading1: false,
                loading2: false,

                // 模块数据总条数
                total1: 0,

                // 模块当前页码
                currentPage1: 1,

                // 模块每页条数
                pageSize1: 10,

                // 区域数据总条数
                total2: 0,

                // 区域当前页码
                currentPage2: 1,

                // 区域每页条数
                pageSize2: 10,


                // 模块列表
                columns1: [{
                        type: 'index',
                        align: 'center',
                        width: 60
                    },
                    {
                        title: '模块名称',
                        align: 'center',
                        key: 'name'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 240,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'default',
                                        icon: 'md-brush',
                                        disabled: this.role > 2
                                    },
                                    style: {
                                        marginRight: '14px',
                                        width: '80px',
                                        height: '30px'
                                    },
                                    on: {
                                        click: () => {
                                            if (this.role > 2) {
                                                return false
                                            }
                                            this.moduleFormItem = {
                                                name: params.row.name,
                                                mdid: params.row.id
                                            }
                                            this.modal1 = true
                                        }
                                    }
                                }, '编辑'),
                                h('Poptip', {
                                        props: {
                                            confirm: true,
                                            title: '你确定要删除吗?',
                                            placement: 'top',
                                            transfer: true
                                        },
                                        on: {
                                            'on-ok': () => {
                                                if (this.role > 2) {
                                                    return false
                                                }
                                                this.deleteByid(params.row.id, 'module')
                                            }
                                        }
                                    },
                                    [h(
                                        'Button', {
                                            props: {
                                                type: 'error',
                                                size: 'default',
                                                icon: 'ios-trash',
                                                disabled: this.role > 2
                                            },
                                            style: {
                                                marginRight: '14px',
                                                width: '80px',
                                                height: '30px'
                                            }
                                        },
                                        '删除'
                                    )]
                                )
                            ])
                        }
                    }

                ],
                // 模块数据
                data1: [],

                // 区域列表
                columns2: [{
                        type: 'index',
                        align: 'center',
                        width: 60
                    },
                    {
                        title: '区域名称',
                        align: 'center',
                        key: 'name'
                    },
                    {
                        title: '是否巡店工位/办公室',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', {
                                domProps: {
                                    innerHTML: params.row.is_cp_ws == 0 ? '否' : '是'
                                }
                            })
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 240,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'default',
                                        icon: 'md-brush',
                                        disabled: this.role > 2
                                    },
                                    style: {
                                        marginRight: '14px',
                                        width: '80px',
                                        height: '30px'
                                    },
                                    on: {
                                        click: () => {
                                            if (this.role > 2) {
                                                return false
                                            }
                                            this.areaFormItem = {
                                                rdid: params.row.id,
                                                name: params.row.name,
                                                sort: params.row.sort,
                                                is_cp_ws: params.row.is_cp_ws
                                            }
                                            this.modal2 = true
                                        }
                                    }
                                }, '编辑'),
                                h('Poptip', {
                                        props: {
                                            confirm: true,
                                            title: '你确定要删除吗?',
                                            placement: 'top',
                                            transfer: true,
                                        },
                                        on: {
                                            'on-ok': () => {
                                                if (this.role > 2) {
                                                    return false
                                                }
                                                this.deleteByid(params.row.id, 'area')
                                            }
                                        }
                                    },
                                    [h(
                                        'Button', {
                                            props: {
                                                type: 'error',
                                                size: 'default',
                                                icon: 'ios-trash',
                                                disabled: this.role > 2
                                            },
                                            style: {
                                                marginRight: '14px',
                                                width: '80px',
                                                height: '30px'
                                            }
                                        },
                                        '删除'
                                    )]
                                )
                            ])
                        }
                    }

                ],
                // 区域数据
                data2: []
            }
        },
        methods: {
            ...mapGetters(['getRole']),
            // 获取区域字典
            getAreaList() {
                this.loading2 = true
                let data = {
                    page: this.currentPage2,
                    rows: this.pageSize2,
                }
                axios.ajax_post('admin-region_dict-ajax_get_region_dict', data).then(res => {
                    this.loading2 = false
                    if (res.data.code === 1) {
                        this.data2 = res.data.data.list
                        this.total2 = res.data.data.total_num
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            // 获取模块字典
            getModuleList() {
                this.loading1 = true
                let data = {
                    page: this.currentPage1,
                    rows: this.pageSize1,
                }
                axios.ajax_post('admin-modular_dict-ajax_get_modular_dict', data).then(res => {
                    this.loading1 = false
                    if (res.data.code === 1) {
                        this.data1 = res.data.data.list
                        this.total1 = res.data.data.total_num
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },


            add(name) {
                // 判断是新增模块还是新增区域
                if (name == 'module') {
                    this.moduleFormItem = {
                        name: ''
                    }
                    this.modal1 = true
                    return false
                }
                this.areaFormItem = {
                    name: '',
                    sort: 10,
                    is_cp_ws: 0
                }
                this.modal2 = true
            },

            // 保存区域
            saveArea() {
                let data = this.areaFormItem
                if (!data.name) {
                    this.$Message.error('请输入区域名称 !');
                    return false
                }
                let url = 'admin-region_dict-ajax_add_region_dict'
                // 判断新增or修改
                if (data.rdid) {
                    url = 'admin-region_dict-ajax_save_region_dict'
                }
                axios.ajax_post(url, data).then(res => {
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: res.data.msg,
                            duration: 3
                        })
                        this.modal2 = false
                        this.getAreaList()
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            // 保存区域
            saveModule() {
                let data = this.moduleFormItem
                if (!data.name) {
                    this.$Message.error('请输入模块名称 !');
                    return false
                }
                let url = 'admin-modular_dict-ajax_add_modular_dict'
                // 判断新增or修改
                if (data.mdid) {
                    url = 'admin-modular_dict-ajax_save_modular_dict'
                }
                axios.ajax_post(url, data).then(res => {
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: res.data.msg,
                            duration: 3
                        })
                        this.modal1 = false
                        this.getModuleList()
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            // 删除
            deleteByid(id, name) {
                let url = ''
                let data = {}

                if (name == 'module') {
                    url = 'admin-modular_dict-ajax_del_modular_dict'
                    data.mdid = id
                }
                if (name == 'area') {
                    data.rdid = id
                    url = 'admin-region_dict-ajax_del_region_dict'
                }
                axios.ajax_post(url, data).then(res => {
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: '删除成功',
                            duration: 3
                        })
                        this.getAreaList()
                        this.getModuleList()
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            getListByPageSize(pageSize, name) {
                if (name == 'module') {
                    this.getModuleList()
                    return false
                }
                this.pageSize2 = pageSize
                this.getAreaList()

            },

            getListByPageNum(page, name) {
                if (name == 'module') {
                    this.getModuleList()
                    return false
                }
                this.currentPage2 = page
                this.getAreaList()

            },
        },
        computed: {
            role() {
                return this.getRole()
            }
        },
        created() {
            this.getAreaList()
            this.getModuleList()
        }
    }
</script>
<style lang="less" scoped>
    .cardBox {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap
    }
</style>